HackGen フォントを VSCode に適用してみた（Windows 11対応）

こんにちは！よしななです。 今回は、プログラミング用のフォントとしてオススメな HackGen フォントを VSCode にインストールし、反映させるまでの手順について備忘録として残します。 これから Windows 11 で開発環境を構築する方のための手助けになればと思います！

目次

• 対象環境
• 対象読者
• HackGen フォントとは？
• セットアップ手順
  • インストール
  • VSCode に反映させる

やりたいこと

イメージとしては、以下の画像の通り HackGen フォントを VSCode にインストールし、VSCode に反映させるところまでのセットアップ手順を示します。

対象環境

• OS
  • Windows 11
• VSCode version 1.86 をインストール済みであること
  • https://code.visualstudio.com/download
  • 日本語化拡張機能導入済み環境で実行しています。

対象読者

• これから HackGen フォントを VSCode にインストールしたいと考えている方

HackGen フォントとは？

HackGen フォントとは、プログラミング向け英文フォント「Hack」と「源ノ角ゴシック」派生の日本語フォント「源柔ゴシック」を合成したプログラミング向けフォントです。GitHub プロジェクトページからダウンロードが可能です。その他の詳細については公式ページが詳しいです。

公式 GitHub プロジェクトページ : https://github.com/yuru7/HackGen

以下の画像の通り、ミスにつながりがちな全角スペースを可視化してくれたり、ぱっと見判別がしにくい数字の「0」、アルファベットの「O」などが判別しやすいようになっています。

セットアップ手順

1.フォントのダウンロード / インストール

手動でダウンロード / インストールする場合

まずは、フォントをダウンロードします。
以下のページから、ページ内の「HackGen_v<バージョン>.zip」という名称の ZIP ファイルをダウンロードします。
※現在の最新バージョンは V2.9.0 なのでこちらをダウンロードします。
ZIP ダウンロードページ：https://github.com/yuru7/HackGen/releases

ダウンロードしたファイルを解凍します。

解凍したファイルを右クリックし、全ユーザーに対しインストールをクリックします。

こちらでダウンロードしたフォントファイルが Windows 環境に追加されます。
C:\Windows\Fonts にフォントファイルがあればインストール完了となります。

コマンドでダウンロード / インストールする場合

Windows 環境の場合、 Chocolatey をセットアップしていれば以下のコマンドでダウンロード / インストールが完了します。

choco install font-hackgen

2.VSCode に反映させる

フォントファイルのダウンロード / インストールが完了したら VSCode に反映させます。

以下の画像の通り、VSCode を開き、ファイル > ユーザー設定 > 設定をクリックします。

以下の設定画面に遷移したら、テキストエディター > フォントをクリックします。
Font Family を"HackGen"に書き換えてください。

上記の設定を完了後、VSCode を再起動するとフォントが反映されます。

こちらで HackGen フォントをインストールし、VSCode に反映させるは完了となります！
ここまで読んでいただきありがとうございました！